<template>
  <section class="main-contain">
    <!--    <h2 class="title">民宿管理系统</h2>-->
    <!-- 登录页 -->
    <el-card class="login-frame">
      <!-- 暂时不使用顶部自带的功能。 -->
      <!-- <section slot="header">登录</section> -->
      <span class="title-head">登 录 系 统</span>
      <section>
        <!-- label-width="80px" -->
        <el-form ref="form" :model="form" :rules="loginFormRules">
          <!--label="用户名"-->
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user"
              class="input-frame"
              v-model="form.username"
              placeholder="用户名"
            ></el-input>
          </el-form-item>

          <!-- label="密码" -->
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              class="input-frame"
              v-model="form.password"
              placeholder="密码"
              show-password
            ></el-input>
          </el-form-item>

          <el-form-item>
            <!-- postData -->
            <el-button class="comfirm-btn" type="primary" @click="postData()">
              <i class="el-icon-check check-icon-size"></i>
            </el-button>
            <el-button class="reset-btn" type="info" @click="resetForm('form')">
              <i class="el-icon-refresh-right"></i>
            </el-button>
          </el-form-item>

          <!-- 记住密码和注册栏 -->
          <el-form-item>
            <!-- 记住密码 -->
            <el-checkbox>记住密码</el-checkbox>
            <!--注册-->
            <p class="footer-text-frame">
              <span>没有账号,</span>
              <span class="register" @click="toRegisterPage()">立即注册</span>
            </p>
          </el-form-item>
        </el-form>
      </section>
    </el-card>


  </section>
</template>

<script>
// 在vue文件中。引入js包的方式要使用import。
import api from '../../js/api/api.js';

export default {
  name: 'Login',

  data() {
    return {
      form: {
        // 姓名
        username: '',
        // 密码
        password: '',
      },

      //表单的验证规则对象
      loginFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 15,
            message: '长度要 3 到 15 个字符',
            trigger: 'blur',
          },
        ],

        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 3,
            max: 15,
            message: '长度要 3 到 15 个字符',
            trigger: 'blur',
          },
        ],
      },
    };
  },

  methods: {
    /** 临时的页面跳转函数 */
    toMainPageTemp() {
      window.location = '/main.html';
    },

    //设置表单重置功能
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    /** 检验表单内容是否都通过了校验？ 本方法借助于elementUI的el-form组件的校验方法 */
    isFormAllPassValidate() {
      // 默认全部的内容都填写完毕
      let res = true;
      this.$refs['form'].validate((validateRes, validateItemObj) => {
        if (!validateRes) {
          res = false;
          return false;
        }
      });
      return res;
    },

    /** 提交数据 */
    postData() {
      // 是否通过校验？校验通过后才可以登陆。
      if (this.isFormAllPassValidate()) {
        api.loginUser(this.form).then((res) => {
          if (res.status === 200) {
            const data = res.data;
            if (data.code === 200) {
              const url = data.url;

              // 保存用户id至缓存
              localStorage.setItem('userId', data.userId);

              setTimeout(() => {
                this.$message.success(' 登陆成功！ ');
              }, 2500);
              window.location = url;
            }

            if (data.code === 500) {
              const msg = data.msg;
              this.$message.error(msg);
            }
          }
        });
      } else {
        this.$message.error(' 你尚未填写完用户名或密码，请补全！ ');
      }
    },

    /** 跳转到注册页 */
    toRegisterPage() {
      window.location = '/register.html';
    },

    //这里写修改密码页
    toForgetPwdPage() {
      //写注册页面的时候，注意看看。
    },

    /** 从测试接口中获取数据。 */
    getTestInter() {
      // const url = '/practice';
      const url = '/fuckyou/fuckme';
      axios
        .get(url)
        .then((res) => {
          console.log('是否可以获取到数据？？', res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },

  created() {
    // this.getTestInter();
  },
};
</script>

<style scoped>
.main-contain {
  width: 90vw;
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* 登录框 */
.login-frame {
  margin-top: 40px;
  width: 18%;
  height: 40%;
}

.logoBox {
  width: 50px;
  height: 50px;
  position: absolute;
}

/*重置按钮*/
.reset-btn {
  width: 30%;
  font-size: 20px;
  background-color: rgb(67, 94, 163);
  font-weight: 600;
  border-color: #fff;
}

/* 确认按钮 */
.comfirm-btn {
  width: 63%;
  background-color: rgb(102, 177, 255);
  font-size: 20px;
  font-weight: 600;
  border-color: #fff;
}

/* 勾标识的样式 */
.check-icon-size {
  font-weight: 800;
}

/* 标题 */
.title {
  color: white;
  margin-bottom: 10px;
}

/*登录字样*/
.title-head {
  display: flex;
  font-size: 24px;
  font-weight: 800;
  color: #595959;
  line-height: 32px;
  justify-content: center;
  margin-top: -15px;
  margin-bottom: 10px;
}

/* 输入框 */
.input-frame .el-input__inner {
  /*background-color: rgb(234, 234, 236);*/
  color: black;
}

/* 输入框 选取效果 */
.input-frame .el-input__inner:focus {
  border-color: rgb(107, 197, 164);
}

/* 底部提示文本框 */
.footer-text-frame {
  margin-top: -40px;
  display: flex;
  justify-content: right;
  font-size: 9px;
}

/*立即登录：字体样式*/
.footer-text-frame span {
  font-size: 14px;
}
/* 注册字样 */
.register {
  cursor: pointer;
  color: rgb(107, 197, 164);
}
</style>
